<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template • TodoMVC</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <section class="todoapp">
    <header class="header">
      <h1>待办事项</h1>
      <input id="addTodo" class="new-todo" placeholder="需要做什么?" autofocus>
    </header>
    <section class="main">
      <input id="toggleAll" class="toggle-all" type="checkbox">
      <label for="toggleAll"></label>
      <ul class="todo-list" id="todoList"></ul>
    </section>
    <footer class="footer">
      <span class="todo-count"><strong>0</strong> 未完成</span>
      <!-- <ul class="filters">
        <li>
          <a class="selected" href="javascript:;">全部</a>
        </li>
        <li>
          <a href="javascript:;">进行中</a>
        </li>
        <li>
          <a href="javascript:;">已完成</a>
        </li>
      </ul>
      <button class="clear-completed">清空</button> -->
    </footer>
  </section>
  <footer class="info">
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>

  <!-- 待办事项模板 -->
  <script type="text/html" id="todoTemplate">
    <li>
      <div class="view">
        <input class="toggle" type="checkbox">
        <label></label>
        <button class="destroy"></button>
      </div>
      <input class="edit" value="">
    </li>
  </script>
  <script src="./libs/jquery-3.5.1.min.js"></script>
  <!-- <script src="./js/app.js"></script> -->

  <script type="text/javascript">
    // // 1、回车添加代办事项
    // // 添加li、li模板，
    // $('#addTodo').keydown(function (e) {
    //   // 获取内容
    //   let text =  $(this).val();
    //   // if (e.keyCode == 13 && text !== '') {
    //   //   console.log(1);
    //   // }
    //   if ( e.keyCode != 13 || !text ) return;
    //   // 获取模板
    //   let telp = $('#todoTemplate').html()
    //   // 转换为jQuery
    //   let newLi = $(telp);
    //   // 添加内容
    //   newLi.find('label').text(text);
    //   // 插入到ul
    //   $('#todoList').prepend(newLi);
    //   // 清楚内容
    //   $(this).val('');
    //   count()
    // });
    // // 2、点击切换已完成事项
    // // 给li添加类名：completed
    // $('.todo-list').on('click', '.toggle', function () {
    //     $(this).parents('li').toggleClass('completed');
    //      count()
    // });

    // // 3、点击可以删除待办事项
    // // 淡出效果并且删除元素
    // $('.todo-list').on('click', '.destroy', function () {
    //     $(this).parents('li').fadeOut(function () {
    //       // 动画里面三个时间，效果，函数
    //       // this指向调用者
    //       $(this).remove();
    //       count();
    //     });

    // });
    // // 4、双击修改内容
    // // 给li添加类名editing，把内容放到input
    // $('.todo-list').on('dblclick', 'li', function () {
    //   $(this).addClass('editing');
    //   // 把内容放到input里面
    //   let txt = $(this).find('label').text();
    //   $(this).find('.edit').val(txt);
    // });

    // // 5、失去焦点修改内容
    // // 给li清楚类名，把内容放到label里面
    // $('.todo-list').on('blur', '.edit', function () {
    //   // 如果类名用来获取元素要加点，
    //   // 其他的都不加点
    //   $(this).parent().removeClass('editing');
    //   // 获取内容
    //   let val = $(this).val();
    //   // $(this).siblings('.view').find('label').text(val);
    //   $(this).parent().find('label').text(val);
    // });


    // // 6、封装函数
    // function count () {
    //   // 总个数
    //   let len1 = $('.todo-list li').length;
    //   // 被选中的个数
    //   let len2 = $('.todo-list li .toggle:checked').length;
    //   // 计算剩余个数
    //   let len = len1 - len2; 
    //   // 放到页面
    //   $('.todo-count strong').text(len);
    // }




    // 1. 按下回车发布内容 
    $('#addTodo').on('keydown', function (e) {
      // 获取内容:
      let text = $('#addTodo').val()

      // 事件对象查看键盘按键 并且值不为空
      if (e.key === 'Enter' && text) {
        // 发布内容
        // 获取 todoTemplate 里面的内容
        let todu = $('#todoTemplate').html();

        let todu_jq = $(todu);

        // 找到 label 设置内容
        todu_jq.find('label').html(text);
        // 在将其放入到 ul 当中
        $('.todo-list').prepend(todu_jq);
        // 清空内容
        $(this).val('')
        console.log($('ul li').length);
        num()
      }
    })
    // 2. 点击 划掉该内容 在点击恢复内容 completed
    $('ul').on('click', '.toggle', function () {

      // 点击复选框给 li 添加类名
      $(this).parents('li').toggleClass('completed')
      // 点击完成项 需要从新渲染 未完成数量
      num()
    })

    // 3. 点击x 删除内容 具有动画效果
    $('ul').on('click', '.destroy', function () {
      $(this).parents('li').fadeOut(500 , function() {
        $(this).remove()
      })
      // 调用函数 从新给未完成事项数量赋值
      num()
    })

    // 4. 双击变为可编辑内容 失去焦点恢复 editing
    $('ul').on('dblclick', 'label', function () {
      // 双击后 添加类名
      $(this).parents('li').addClass('editing')
      // 双击后自动获取焦点
      $(this).parent().siblings('.edit').focus()
      // 获取 label 中的值
      let label = $(this).html()
      // 将值赋予给 当前 li 里面的 input
      $(this).parent().siblings('.edit').val(label)
    
    })

    $('ul').on('blur', '.edit', function () {
      // 失去焦点 删除类名
      $(this).parents('li').removeClass('editing')
      // 获得ipt的 val 值
      let ipt = $(this).val()
      // 如果为空 则删除当前行
      if (ipt === '') {
        $(this).parents('li').fadeOut(500 , function() {
          $(this).remove()
        })
        // 调用函数 从新给未完成事项数量赋值
        num()
      }
      // 如果不为空 则将 val 传给当前 li 的 label
      $(this).siblings('div').find('label').html(ipt)
    })

    // 5. 有几个未完成事件显示几项未完成
    function num() {
      // 获得 被划去的个数
      let sum_end = document.querySelectorAll('.completed').length
      // 用 li 的个数 减上 被划去的个数
      let sum = $('ul li').length - sum_end
      // 从新渲染数据
      $('.todo-count').find('strong').html(sum)
    }

  </script>



</body>

</html>